<template>
  <div>
    <p>Child</p>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script>
export default {
  name: "XChild",
  props: {
    name: String,
    age: Number,
    setAge: Function,
  },
  methods: {
    handleClick() {
      // props数据是只读的，不能修改
      // 强行修改props数据，父组件数据不能同步的，导致数据出现问题
      // 结论：数据源在哪，更新数据的方法就定义在哪
      // eslint-disable-next-line
      // this.age++;
      this.setAge();
    },
  },
};
</script>

<style></style>
